<template>
  <div class="binding-shop">
    <dc-header :page-to="'/login'" :title="'绑定产品'" :icon="'icon-header-back'"></dc-header>
    <div class="textabovefrom">请选择您正在使用的收银系统，并登录<span class="green">【管理员】</span>账号绑定集团或门店</div>
    <div class="pl30 pr30">
      <inputSelect placeholder="请选择" type="text"
                   class="mt30"
                   iconName="icon-register-pos"
                   v-validate="{ rules: { required: true } }"
                   name="收银系统"
                   label="收银系统"
                   :upscrolldata="companyType"
                   v-model="companyTypesend"
      />
      <inputItem placeholder="请输入" type="text"
                 class="mt30"
                 iconName="icon-register-num"
                 v-model="shopCode"
                 :maxLength = "30"
                 v-validate="{ rules: { required: true } }"
                 name="店铺编号"
                 label="店铺编号"
      />
      <inputItem placeholder="请输入" type="text"
                 class="mt30"
                 iconName="icon-register-account"
                 v-model="adminAccount"
                 v-validate="{ rules: { required: true } }"
                 name="管理员账号"
                 label="管理员账号"
                 :maxLength = "30"
      />
      <inputItem placeholder="请输入" type="password"
                 class="mt30"
                 iconName="icon-login-password"
                 v-model="adminPassword"
                 v-validate="{ rules: { required: true } }"
                 name="管理员密码"
                 label="管理员密码"
                 :maxLength = "20"
      />
      <mt-button class="mt50" size="large" type="primary" @click="submitform"
                 :disabled="disable || (!companyTypesend || !shopCode || !adminAccount || !adminPassword )&& errors.items.length==0 || errors.items.length!=0">
        完成
      </mt-button>
    </div>
    <div class="mt50 bottom-info">
      <p>还没有天财商龙产品？</p>
      <div class="btns">
        <router-link to="" @click.native="gotoPlay">
          <mt-button class="green" size="small" type="primary" plain>立即体验</mt-button>
        </router-link>
        |
        <router-link to="/olregister">
          <mt-button class="theme" size="small" type="primary" plain>在线登记</mt-button>
        </router-link>
      </div>
    </div>
  </div>
</template>
<script>
  import header from '@/common/plugins/header';
  import inputItem from '@/common/plugins/input/inputItem.vue';
  import inputSelect from '@/common/plugins/input/inputSelect.vue';
  import mintUi from '@/common/mintUi';
  import shopApi from '@/common/api/shopAlter';
  import {mapActions} from 'vuex';
  import api from '@/common/api/regist';
  import util from '@/common/util';

  export default {
    data () {
      return {
        disable: false,
        shopCode: '',
        adminAccount: '',
        adminPassword: '',
        companyTypesend: '',
        rawcompanyType: []
      };
    },
    computed: {
      companyType () {
        return this.rawcompanyType.map((item, i) => {
          return {
            label: item.name,
            value: item.code
          };
        });
      }
    },
    components: {
      'dc-header': header,
      inputItem,
      inputSelect
    },
    methods: {
      ...mapActions({setStore: 'setStore', setPermission: 'setPermission'}),
      submitform () {
        this.disable = true;
        let self = this;
        this.$validator.validateAll().then((result) => {
          if (result) {
            shopApi.bindShop({
              productCode: this.companyTypesend,
              shopCode: this.shopCode,
              adminAccount: this.adminAccount,
              adminPassword: this.adminPassword
            }).then(res => {
              mintUi.openToast('恭喜您绑定企业成功');
              util.loginTask(res);
            });
          } else {
            mintUi.openToast(this.errors.items[0].msg);
          }
        });
        setTimeout(function () {
          self.disable = false;
        }, 2000);
      },
      gotoPlay () {
        api.getPlay().then(res => {
          util.loginTask(res);
        });
      }
    },
    created () {
      shopApi.getProduct(1).then(res => {
        this.rawcompanyType = res;
        this.companyTypesend = res[0].code;
      });
    }
  };
</script>
<style lang="scss" scoped>
  @import "../../assets/css/variable";

  .green {
    color: #66cf8e;
    border-color: #66cf8e;
  }
  .theme {
    color: $theme-color;
    border-color: $theme-color;
  }

  .binding-shop {
    margin-top: px2rem(88px);
    text-align: center;
    .f32 {
      font-size: px2rem(32px);
    }
    .f24 {
      font-size: px2rem(24px);
      color: #808080;
      margin: 0 0 px2rem(20px) 0;
    }
    .bottom-info {
      color: #999;
      position: fixed;
      bottom: 20px;
      left: 0;
      right: 0;
      font-size: px2rem(28px);
      margin-top: px2rem(24px);
      a {
        color: $theme-color;
      }
    }
  }
  .btns{
    .mint-button{
      display: inline-block;
    }
    display: flex;
    justify-content: space-evenly;
    line-height: 2;
  }
</style>
